<!-- 组合式 -->
<script setup>
	import './sublevel.scss'
	import {
		ref,
		reactive,
		computed,
		watch,
		onMounted,
	} from 'vue';

	import {
		ElMessage
	} from 'element-plus'
	import api from '@/api/api';
	import util from '@/utils/util';

	import {
		useUserStore,
		useConfigStore,
	} from '@/stores'

	// 组件
	import tableVue from '@/views/home/components/table.vue';
	import table2Vue from '@/views/home/components/table2.vue';
	import table3Vue from '@/views/home/components/table3.vue';
	import statistics1Vue from '@/views/home/components/statistics1.vue';
	import statistics2Vue from '@/views/home/components/statistics2.vue';
	import chartVue from '@/views/home/components/chart.vue';
	import table4Vue from '@/views/home/components/table4.vue';

	import title from '@/assets/img/title.png'

	// 参数
	const pages = reactive({})

	// 挂载
	onMounted(() => {
		init(); // 初始化
	})

	// 初始化
	async function init() {}
</script>

<template>
	<div class="sublevel">
		<img class="app-back" :src="util.getImageUrl('u0_state0.jpg')" />
		<!-- <img class="app-u1" :src="util.getImageUrl('u1.png')" /> -->

		<!-- 标题 -->
		<!-- <p class="title">智慧实验室数据统计中心</p> -->
		<img :src="title" class="app-title" />

		<!-- 时间 -->
		<p class="app-date-time">{{util.getMYD('YMD')}} {{util.getWeek()}}</p>

		<div class="main-subject">
			<p class="table-title">{{$route.query.title || '--'}}</p>
			<div class="app-background" style="height: 90%;">
				<table-vue v-if="$route.query.type == 'table'" />
				<table2-vue v-if="$route.query.type == 'table2'" />
				<table3-vue v-if="$route.query.type == 'table3'" />
				<table4-vue v-if="$route.query.type == 'table4'" />

				<chart-vue v-if="$route.query.type == 'chart'" />
			</div>
		</div>

	</div>
</template>

<style lang="scss">
	.sublevel {

		// chart-vue
		.chart-list {
			.chart-list-li {
				.circular-progress {
					width: 250px !important;
					height: 250px !important;
				}

				.chart-list-li-title {
					font-size: 20px !important;
					margin-top: 10px;
				}

				.progress-value {
					font-size: 20px !important;

					span {
						font-size: 40px !important;
					}
				}
			}
		}



	}
</style>